/* SPDX-License-Identifier: Apache-2.0 */

/*
  A sidebar section. Currently used on the package detail page.

  <div class="sidebar-section">
    <h3 class="sidebar-section__title">Title</h3>
    // Content here
  </div>

  Modifiers:
    - maintainers: Custom layout for maintainers section on package detail page.
*/

.sidebar-section {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid $border-color;
  word-wrap: break-word;

  .sidebar-section__title {
    font-size: 1.1rem;
    padding-top: 0;
  }

  .sidebar-section__user-gravatar {
    @include link-without-underline;
    @include link-focus-state($primary-color);
  }

  .ethical-sidebar {
    border: 2px solid $border-color;
    border-radius: 5px;
    padding: 1rem 1rem 0.25rem 1em;
  }

  .ethical-content {
    text-align: center;

    img {
      width: 60%;
      display: inline-block;
    }
  }

  .ethical-image-link {
    @include link-without-underline;
  }

  .ethical-text {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  &:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border: 0;
  }

  &__maintainer {
    display: flex;
    align-items: center;

    &:not(:last-of-type) {
      margin-bottom: 5px;
    }

    a {
      @include link-without-underline;
      @include link-focus-state($primary-color);
    }
  }

  &__classifiers {
    margin: 0;
    padding: 0;
    list-style-type: none;

    li {
      margin: 0;
      padding: 0;
      margin-top: $half-spacing-unit;

      &:first-of-type,
      ul li {
        margin-top: 0;
      }
    }
  }

  &__user-gravatar {
    margin-right: 10px;
    margin-bottom: 5px;

    img {
      max-width: 50px;

      @media only screen and (max-width: $desktop) {
        max-width: 40px;
        max-height: 40px;
      }
    }
  }

  &__user-gravatar-text {
    margin-bottom: 5px;
    word-break: break-word;
    display: inline-block;
    max-width: calc(100% - 60px);
    text-decoration: none;
    background-position: 0 1.15em;
    background-repeat: repeat-x;
    background-size: 100% 1.5px;
    @include primary-underlined-link;

    @media only screen and (max-width: $desktop) {
      max-width: calc(100% - 50px);
    }
  }
}
